<template>
<div class="set-info" style="flex:1;">
    <scroller class="scroller">
        <div class="set-info" :style="contentStyle">
            <wxc-minibar>
                <image slot="left" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/back_icon.png"  style="height:28px;width:16px;"></image>
                <div class="header-con" slot="middle">
                    <text class="header-title">{{title}}</text>
                </div>
                <div class="header-font-title" slot="right" @click="save">
                    <text class="header-font-pr">完成</text>
                </div>
            </wxc-minibar>
            
            <div class="select-sex" v-if="type == 'sex'">
                <div class="my-info-card b-b-s" @click="changeSix(1)">
                    <text class="my-info-card-text">男</text>
                    <div class="my-card-cont">
                        <div class="sex-check-not" v-if=" personalDetails.sex != 1" ></div>
                        <image class="protocol_fl_checkd"  style="width:40px;height:40px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/checked.png" v-else></image>
                    </div>
                </div>

                <div class="my-info-card" @click="changeSix(0)">
                    <text class="my-info-card-text">女</text>
                    <div class="my-card-cont">
                        <div class="sex-check-not" v-if=" personalDetails.sex != 0" ></div>
                        <image class="protocol_fl_checkd"  style="width:40px;height:40px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/checked.png" v-else></image>
                    </div>
                </div>
            </div>


            <div class="select-nice" v-else>
                <div class="my-info-card">
                    <input type="text" class="set-nice" placeholder="请输入昵称" v-model="personalDetails.nickName">
                </div>
            </div>
        </div>
    </scroller>
</div>
</template>
<script>
    import { Utils, Checkbox} from "weex-ui"
    import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
    import { serialize, getBaseUrl, jsonAnalysis }  from "@/utils/index.js"

    const modal = weex.requireModule('modal')
    let storage = weex.requireModule('storage')
    let navigator = weex.requireModule('navigator')

    export default {
        data() {
            return {
                contentStyle:{},
                sex:0,
                nice:'',
                type:'',
                baseURL:'',
                title:'',
                personalDetails:{
                   nickName:"",
                   sex:0
                }
            }
        },

        methods:{
            changeSix(data) {
                this.personalDetails.sex = data
                this.save()
            },

            save() {
                if( this.type != 'sex' && this.personalDetails.nickName.length > 8) {
                    modal.toast({ message: '昵称设置不能超过8个汉字' })

                    return false;
                }
                
                navigator.pop({
                    'url': this.baseURL + 'views/my-account/my-info.js?'+ serialize(this.personalDetails),
                    'animated': 'true'
                })
            }
        },

        components: {
            WxcMinibar
        },

        mounted() {
            this.personalDetails = jsonAnalysis(weex.config.bundleUrl.split('?')[1])
        
            this.type = this.personalDetails.sign

            this.title = this.type == 'sex' ? '设置性别' : '设置昵称'
        },

        created() {

            const tabPageHeight = Utils.env.getPageHeight()
            // 获取路径
            this.baseURL = getBaseUrl(weex.config.bundleUrl, true)

            this.contentStyle = {
                'height': tabPageHeight + "px"
            }
        }
    }
</script>
<style scoped>

.scroller {
  width: 750px;
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
}

.set-info {
    width: 750px;
    position: relative;
    z-index: 2;
    background-color: rgb(242, 243, 244);
    
}

.set-info-header {
    /* height: 80px; */
    box-shadow: 0px 4px 15px #e5e5e5;
    position: relative;
    z-index: 9;
    opacity: 1;
}

.sex-check-not {
    width:42px;
    height: 42px;
    border-style: solid;
    border-width: 1px;
    border-color: #d5d5d5;
    border-radius: 21px;
}

.b-b-s {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(240,240,240);
}

.my-info-card {
    display: flex;
    width:750px;
    height: 112px;
    background-color: #fff;
    padding-left:32px;
    padding-right:32px;
    box-sizing: border-box;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}


.my-info-card-text {
    font-size: 32px;
    color: #333;
    font-family: PingFangSC-Medium;
}

.set-nice {
    width:686px;
    height: 112px;
    padding-left:32px;
    padding-right:32px;
    color: #333;
}

.header {
    width:750px;
    height: 90px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    position: relative;
}

.header-title {
    font-size: 34px;
    color: #fff;
    font-family: PingFangSC-Regular;
}

.header-img {
    position: absolute;
    left:32px;
    top:0;
    margin-left:0;
}

.header-font {
    position: absolute;
    right:32px;
    top:0;
    margin-left:0;
    display: flex;
    justify-content: center;
    width:100px;
    height: 90px;
    align-items: flex-end;
   
}

.header-size {
     font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #666666;
}

.header-con {
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
  flex-direction: row;
}
.header-title {
  font-size: 34px;
  color: #fff;
  font-weight: 600;
  font-family: PingFangSC-Medium;
}

.header-font-pr {
  font-size: 28px;
  color: #fff;
}
</style>
